import { MutableRefObject } from 'react';

import {
  LayerSubTypeBE,
  LayerTypeBE,
  LayerTypeFE
} from '../components/Editor/components/TemplateEffect/constant';

export enum LayerType {
  Image = 'image',
  Text = 'text',
  Shape = 'graphics',
  Product = 'item'
}

export interface LayerRatioInfoBE {
  [layerId: string]: {
    ratio: [number, number];
  };
}

export interface LayerInfoBE {
  height: number;
  width: number;
  x: number;
  y: number;
  z: number;
  id: string;
  name: string;
  rotation: number;
  type: LayerTypeBE;
  isHidden: boolean;
  ratio?: [number, number];
  text?: {
    fontSize: number;
    fontFamily: string;
    content: string;
    fontColor: [number, number, number, number];
    fillColor: [number, number, number, number];
    textDecorationLine: string;
    horizontalAlign: string;
    verticalAlign: string;
    borderRadius: number;
  };
  image?: {
    link: string;
    name?: string;
    cropped: [number, number, number, number];
  };
  graphics?: {
    subtype: LayerSubTypeBE;
    content: string;
    fillColor: string;
    transparency: number;
    borderColor: string;
    borderOpacity: number;
    borderRadius: number;
  };
  originImageInfo?: {
    height: number;
    width: number;
    x: number;
    y: number;
  };
}

export interface LayerInfoFEDataText {
  fontSize: number;
  fontFamily: string;
  content: string;
  textDecorationLine: string;
  horizontalAlign: string;
  verticalAlign: string;
  borderRadius: number;
  // 前端自定义属性
  textColor: string;
  fill: string;
  opacity: number;
}

export interface LayerInfoFEDataImage {
  name?: string;
  cropped?: [number, number, number, number];
  // 前端自定义属性，记得删除
  isCropped?: boolean;
  widthRate?: number;
  heightRate?: number;
  originSrc?: string;
  fileKey?: string;
}

export interface LayerInfoFEDataGraphics {
  content: string;
  fillColor: string;
  transparency: number;
  borderColor: string;
  borderOpacity: number;
  borderRadius: number;
}

export interface LayerInfoFEData {
  z: number;
  id: string;
  name: string;
  isHidden: boolean;
  type: LayerTypeBE;
  ratio?: [number, number];
  needPreview?: boolean; // 前端自定义属性，是否需要preview
  text?: LayerInfoFEDataText;
  image?: LayerInfoFEDataImage;
  graphics?: LayerInfoFEDataGraphics;
  // 用户输入的旋转角度，由于过大会导致展示异常，需要对360取余获取实际旋转角度
  rotation: number;
}

export interface LayerInfoFE {
  type: LayerTypeFE;

  // 大小、位置属性
  height: number;
  width: number;
  left: number;
  top: number;
  angle: number;
  absolutePositioned?: boolean;

  // only for originImageData
  scaleX?: number;
  scaleY?: number;

  // 图片、文字属性
  src?: string;

  // shape的border属性
  stroke?: string;
  strokeWidth?: number;
  strokeUniform?: boolean;
  // shape的border圆角属性
  rx?: number;
  ry?: number;
  // shape里triangular的圆角属性
  radius?: number;
  // shape的填充颜色属性
  fill?: string;
  // 透明度，用于isHidden的控制
  opacity?: number;

  // 控制边框属性
  cornerColor?: string;
  cornerStrokeColor?: string;
  borderColor?: string;
  transparentCorners?: boolean;

  // 业务属性
  data: LayerInfoFEData;
}

export type ScreenRefType = MutableRefObject<{
  getCurrentLayers: (layers: LayerInfoFE[]) => LayerInfoFE[];
  rerenderScreen: (layers: LayerInfoFE[], activeKey?: string) => void;
  rerenderLayer: (layer: LayerInfoFE) => void;
}>;

export interface Info {
  templateName: string;
  adAccountId?: string;
}
